<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Insert title here</title>
<style type="text/css">
body{margin: 0 auto;}

#input_area{height: 80px;text-align: center;}
#machine1{float: left;}
#machine2{float:left;}
#machine3{clear: both;}




.machine{background-color:#8C8C8C; padding-top:53px;padding-left:27px; width:525px; border: 1px solid #555555;height:345px; background-image: url("/pencil_factory/img/skin.gif"); background-repeat: no-repeat;}
#t1{width:250px; height:200px; border: 1px solid #B8B8B8; display: block; float: left;}
.b1{padding: 5px 0 0 10px; display:block; width:70px;height:15px; color:#0054FF;float: left; font-weight: bold; }
.b2{padding: 5px 0 0 50px; display:block; width:70px;height:15px; color:#2F9D27;float: left; font-weight: bold;font-size: 24px;  }


.d1{ float: right; width:250px; height:32px;border:1px solid #555555; background-color: #D9E5FF;float: left;}

.d2{font-size:13px;font-weight:bold;height:12px; display:block; background-color: #41FF3A;}


.d3{width:250px; height:65px; display:block; background-color: #FFFFDE;clear: both;}

.d4{width:200px; height:30px; display:block; border:2px solid #000000;}
#d52{width:50%; height:30px; display:block; background-color: #5587ED;}


.state_box{text-align:center; height:170px; margin-left:15px; width:40px; border:10px solid #555555; float: left; background-color:#EAEAEA; padding-top: 10px;}
.lb_01{ font-weight: bold;}
.state_box2{text-align:center; height:185px; margin-left:5px; width:160px; border:2px solid #5587ED; float: left; background-color:#EAEAEA; padding-top: 10px;}
.li_box{width: 20px; height: 20px; display: block; background-color: #000042;margin: 5px 0 5px 10px;}

<!-- 기계상태표시창  -->


#db_area11{ }
#db_area1{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }
#db_area2{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }
#db_area12{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }


.ttime{font-size: 11px;}


.name_ma{text-align: center; width:498px; font-weight: bold; font-size: 24px; margin-top: 8px;color:#F6F6F6;}

#tdbtn{text-align: center;}
#stopbtn{width:100px; height: 30px; margin-left: 26px;display:none}


#reportbtn{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:block;}
#reportbtn1{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:block;}
#reportbtn2{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:block;}
</style>

<link type="text/css" href="/pencil_factory/css/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="/pencil_factory/js/jquery.js"></script>
<script type="text/javascript" src="/pencil_factory/js/jquery-ui.js"></script>

<script type="text/javascript" src="/pencil_factory/js/insertindex.js"></script>
<script type="text/javascript">
/*
var x2=0;
var flagState=0;

$(document).ready(function(){
//	alert("돼냐?");
	
selectPencil();

	$("#stopBtn2").on("click",function(){
		x2=0;
	});
	
		$("#sendBtn2").on("click",function(){
			
			$("#reportbtn1").css({"display":"none"});
			if(x2>=1){
					alert("작동중입니다."+x2);
			}
			if(x2==0){
				alert("작동합니다."+x2);
				x2=1;
				
			
				$.ajax({
						"url":"/pencil_factory/insertMachine/begin.do",
						"type":"post",
						"data":{"orderNumS":$("#orderNumS2").val()},
						"dataType":"json",
						"beforeSend":function(){
							
						},
						"success":function(data){//변수 data의 type- javascript 객첵}
							
							
						},"error":function(xhr, status, msg){
						//	alert("오류 발생 :"+xhr.readyState+","+status+","+msg);
					}
				});
			
				
				
				
			
				state_machine(1);
				pullServer();
				$("#db_area12").empty();
				$("#db_area12").append("<b>작업을 시작합니다.</b><br>");
			
			}
		});
		
		////////////////
		
	$("#testBtn").on("click",function(){
		alert("퍼센트 테스트:"+valuePersent($("#test").val()));
	});
		
		
	state_machine(flagState);
	$("#reportbtn2").click(function(){
		$.ajax({
			"url":"/pencil_factory/insertMachine/getReport.do",
			"type":"post",

			"dataType":"json",
		
				"success":function(data){
					if(reCount==0){
						$("#list").empty();
						for(var i = 0; i<data.length;i++){
							$("#list").prepend("<b>"+
									"흑심 양 : " + data[i].blackStick+
									"&nbsp;&nbsp;나무판 양 : " + data[i].holeBoard +
									"&nbsp;&nbsp;시작 시간 : " + data[i].startTime + 
									"&nbsp;&nbsp;끝난 시간 : " + data[i].endTime + 
									"&nbsp;&nbsp;정상 품   : " + data[i].normal +
									"&nbsp;&nbsp;비정상 품 : " + data[i].abnormal +
									"&nbsp;&nbsp;상태 : " + data[i].state +
									"&nbsp;&nbsp;기계피로도 : " + data[i].machineLife +
									
									"</b><br>");
						}
					}
					
					
				}
		
		});

		 $("#dialog_layer").dialog({ "width":600,
	            "Height": 500,"modal":true,"position":{"my":"center top",
				"at" : "bottom",
				"of" : "#input_area"}});		
		 
	});
});





function test(){
	alert("천재");
	
}
var reCount = 0;


var endflag=0;
var steprun=0;//진행 상태를 말해준다.
var products=0;//완성품의 수 카운터
var count = 0;
var firstBs = 0;
var firstNp = 0;
function pullServer(){
	
	//alert("천재");
	$.ajax({
		"url":"/pencil_factory/insertMachine/getmoniser.do",
		"type":"post",
		"data":{"id":$("#cid").val()},
		"dataType":"json",
		"beforeSend":function(){
				data=null;
				$("#oderNum21").html(""+$("#orderNumS2").val()+"");
				
			},
			"success":function(data){
				
				if(count==0){
					firstBs = data.blackStick;
					firstNp = data.holeBoard;
					$("#firstBs").html("<b>"+firstBs+"</b>");
					$("#firstNp").html("<b>"+firstNp+"</b>");
					
					count++;
				}
				
				
				steprun=data.runstep;
				products=(data.normal+data.abnormal)*5;
				
				$("#d52, #sTime2, #eTime2, #product2").empty();
				$("#d52").html("<b>"+data.runstep+"</b>");
				$("#d52").css({"width":""+data.runstep+"%"});
				
				steprun=data.runstep;
				
				$("#tg12").html("<b>"+(data.blackStick-5)+"</b>");
				$("#tg22").html("<b>"+(data.holeBoard-2)+"</b>");
				$("#tg42").html("<b>"+data.machineLife+"</b>");
			//	alert(data.state);
				
				
				
				
				if(data.state == '불량'){
					$("#db_area12").prepend("<b>불량품이 발생했습니다.-불량품량:"+data.abnormal+"</b><br>");
					
					flagState=2;
					//alert(flagState);
				}
			
					if(data.state == '정상'){
						$("#db_area12").prepend("<font size='3'>정상품:"+data.normal+", 상태:"+data.state+", 시간:"+data.endTime+"</font><br>");
						
						flagState=1;
					//	alert(flagState);
					}
			
				
			
				$("#sTime2").html("<font size='1'>"+data.startTime+"</font>");
				$("#eTime2").html("<font size='1'>"+data.endTime+"</font>");
				$("#product2").html("<b>"+(data.normal*5)+"</b>");
				
				
				
			},"error":function(xhr, status, msg){
				alert("오류 발생 :"+xhr.readyState+","+status+","+msg);
		}	

			
	});
	
	
	//////
	state_machine(flagState);

/////////////////////////////////////////////////////////////	
 
	endflag=endflag+1;//끝을 위한 플러그 첫번째 값이 쓰레기 값이라 처리에 어려움이 있어 넣었다.
	if(endflag >2){
		selectPencil();
		if($("#orderNumS2").val()==products){
		//if(steprun >= 100){
			//alert("완료");
		//	$("#db_area").prepend("<b>작업이 완료되었습니다.</b><br>");
				x2=0;
				endflag=0;
				steprun=0;
				products=0;
				flagState=0;
				state_machine(flagState);
				$("#reportbtn1").css({"display":"block"});
				//////////////////////////////끝나는 부분
				//alert("종료한다.");
				
					$("#db_area12").prepend("<b>작업이 완료되었습니다.</b><br>");
				//$("#db_area").children(1).removeChild();
				//$("#db_area").lastChild().removeChild();
				
			return false();
		}
		
	}
///////////////////////////////////////////////////////////////////	
	setTimeout("pullServer()",1300);
	
	
	
}
	


function state_machine(flagState){
	if(flagState==0){
		$("#st_box32").css({"background-color":"#ff0000"});	
		$("#st_box12, #st_box22").css({"background-color":"#000042"});	
		
	}
	if(flagState == 1){
		$("#st_box12").css({"background-color":"#ABF200"});	
		$("#st_box22, #st_box32").css({"background-color":"#000042"});	
	}
	if(flagState == 2){
		$("#st_box22").css({"background-color":"#FFFF48"});	
		$("#st_box12, #st_box32").css({"background-color":" #000042"});	
	}
}


function test1(a){
	alert("test"+a);
}
	/////////////////////
		//받아 오는 값을 퍼센트로 처리 
		var a1=0;
		function valuePersent(met){
			if(a1==0){
				a1=met;
				alert(a1);
			}
			if(a1>0){
			var	b1=a1/100;
			return persent=met/b1;
			}
}		
		
function selectPencil(){
			$.ajax({
				"url":"/pencil_factory/insertMachine/getPencil.do",
				"type":"post",

				"dataType":"json",
			
					"success":function(data){
						$("#db_pencil").html("<b>"+data.count+"</b>");
						
					}
			
			});
			
 }
 */
</script>

</head>
<body>


<div id="input_area">
	<h1>열 필 공 장 4조</h1>
	<input type="text" id="orderNumS2" name="orderNumS2"><input type="button" id="sendBtn2" value="전송"><input type="button" id="stopBtn2" value="정지">	
</div>

<div class="machine" id="machine2">
	<div id="t1">

		<div class="d1"><span class="b1">연필심</span><span id="tg12" class="b2" >0</span></div>
		<div class="d1"><span class="b1">나무판</span><span id="tg22" class="b2" >0</span></div>
	<!-- 	<div class="d1"><span class="b1">접착제</span><span id="tg31"  class="b2" >100</span></div> -->
		<div class="d1"><span class="b1">기계피로</span><span  id="tg42" class="b2" >0</span></div>
		
		<div class="d3">
			<span class="b1"><b>진행률</b></span><br>
			
			<span class="d4"><span id="d52" >0</span></span>
		</div>	
	</div>
	<div class="state_box">
		<div><em class="lb_01">작동</em><span id="st_box12" class="li_box"></span></div>
		<div><em class="lb_01">알림</em><span id="st_box22" class="li_box"></span></div>
		<div><em class="lb_01">종료</em><span id="st_box32" class="li_box"></span></div>
	</div>
	<div class="state_box2">
		<table>
			<tr>
				<td width='90px' class="ttime">시작시간:</td><td id="sTime2">-</td>
			</tr>
			<tr>
				<td class="ttime">완료시간:</td><td id="eTime2" >-</td>
			</tr>
			<tr>
				<td class="ttime">주문량:</td><td id="oderNum21">-</td>
			</tr>
			
			<tr>
				<td class="ttime">생산량:</td><td id="product2">-</td>
			</tr>
			<tr>
				<td colspan="2" id="tdbtn">
					<center>
						<input type="button" id="reportbtn2" value="보고서">
					</center>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="db_area12">
	</div>
	<div class="name_ma">☆연필심 삽입 머신☆</div>
</div>
<div = id="db_pencil">

</div>

<div id="dialog_layer" style="display: none;" title="보고서"> 

	
	<div id="list">
		<span id="firstBs"></span>&nbsp;&nbsp;&nbsp;
		<span id="firstNp"></span>
	</div>


</div>
<!--   ☆연필심 삽입 머신☆ ☆연필심 삽입 머신☆ ☆연필심 삽입 머신☆ ☆연필심 삽입 머신☆  -->


<!--    ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ ☆연필 깍기 머신☆   -->
